#bd {
    margin: 10px auto;
    width: 90%;
    min-height: 500px;
}
.progress {
    list-style-type: none;
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius:10px;
}
.progress li {
    float: left;
    margin: 0;
    overflow: hidden;
    width:25%;
}

.progress .step {
    height: 30px;
    width: 100%;
    font: 700 simsun,arial;
    color: #666;
    text-align: center;
    background: #eee;
}

.progress span {
    display: block;
    float: left;
}
.progress .on .triangle-left {
    background: #f36f71;
}

.progress .not .step, .progress .not .triangle {
    background: #fff;
}
.progress .on .step {
    background: #f36f71;
    color: #fff;
    border-radius:10px;
}

#bd .body {
    border: 1px solid #DDD;
    background: #FFF;
}

.pg-pay .intro {
    padding-left: 70px;
    line-height: 16px;
    font-size: 12px;
    color: #999;
}

.pg-pay .desc {
    color: #333;
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.pg-pay .details {
    margin-top: 20px;
    border: 1px solid #EAEAEA;
    width: 100%;
    font-size: 12px;
    font-family: simsun;
}

.pg-pay h2 {
    padding-left: 70px;
    height: 50px;
    line-height: 40px;
    font-size: 18px;
    font-family: 'Microsoft Yahei' Arial;
    color: #333;
    background: url(../images/sp-icons.png) no-repeat 0 -300px;
}

.pg-pay .total {
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px dotted #EAEAEA;
    margin-bottom: 20px;
}
.pg-pay {
    padding: 30px 10%;
    line-height: 28px;
    font-size: 14px;
    margin: 0 auto;
}

.pg-pay .details td strong {
    font-weight: bolder;
    font-family: Arial;
    font-size: 14px;
}
.pg-pay .details td {
    /*width: 25%;*/
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border: 1px solid #EAEAEA;
}

.pg-pay .details th {
     background: #F7F7F7;
     color: #000;
     height: 30px;
    line-height:30px;
 }

.pg-pay .pay-handle {
    text-align: right;
}
.pg-pay .pay-handle .pay-amount em {
    color: #F50;
    font-size: 22px;
    font-family: Arial;
}
.btn-hot {
    display: inline-block;
    padding: 6px 20px;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Microsoft Yahei',Arial;
    letter-spacing: .1em;
    text-align: center;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    background-color: #29b4a8;
    border-color: #23a79c;
    background-color: #2eb8ac;
    background-image: -webkit-gradient(linear,0 top,100% top,from(#25b0a4),to(#2eb8ac));
    background-image: -webkit-linear-gradient(left,color-stop(#25b0a4 0),color-stop(#2eb8ac 100%));
    background-image: -moz-linear-gradient(left,#25b0a4 0,#2eb8ac 100%);
    background-image: linear-gradient(to right,#25b0a4 0,#2eb8ac 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff25b0a4', endColorstr='#ff2eb8ac', GradientType=1);
    -webkit-box-shadow: inset 0 1px 0 #2ac2b5;
    -moz-box-shadow: inset 0 1px 0 #2ac2b5;
    box-shadow: inset 0 1px 0 #2ac2b5;
    color: #fff;
    background-color: #ff8d07;
    border-color: #f08100;
    background-color: #ff900e;
    background-image: -webkit-gradient(linear,0 top,100% top,from(#ff8900),to(#ff900e));
    background-image: -webkit-linear-gradient(left,color-stop(#ff8900 0),color-stop(#ff900e 100%));
    background-image: -moz-linear-gradient(left,#ff8900 0,#ff900e 100%);
    background-image: linear-gradient(to right,#ff8900 0,#ff900e 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff8900', endColorstr='#ffff900e', GradientType=1);
    -webkit-box-shadow: inset 0 1px 0 #fea418;
    -moz-box-shadow: inset 0 1px 0 #fea418;
    box-shadow: inset 0 1px 0 #fea418;
}
.remind-pay strong {
    color: #f36f71;
}

.remind-pay i {
    background: url(../images/attention.png) no-repeat;
    width: 15px;
    height: 15px;
    display: inline-block;
    background-size: 100%;
    vertical-align: middle;
    position: relative;
    top: -2px;
    left: -2px;
}

.demo{ min-height:450px;}
.demo div{box-sizing: border-box}
@media screen and (max-width: 360px) {.demo {width:340px}}

.front{width: 300px;margin: 15px auto;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}
.booking-details {float: right;position: relative;width:30%;height: 450px; }
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;}
.booking-details p{line-height:26px; font-size:16px; color:#999}
.booking-details p span{color:#666}
div.seatCharts-cell {color: #182C4E;height: 40px;width: 6%;line-height: 40px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
div.seatCharts-row {height: 45px;overflow: hidden;}
div.seatCharts-seat.available {background-color: #B9DEA0;}
div.seatCharts-seat.focused {background-color: #76B474;border: none;}
div.seatCharts-seat.selected {background-color: #E6CAC4;}
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}
div.seatCharts-container {border-right: 1px dotted #adadad;width: 66%;padding: 20px;float: left;}
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}
ul.seatCharts-legendList {padding-left: 0px;}
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;}
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}
/*#seat-map > div.seatCharts-row >  div:first-child ~ div[class$=' available']{padding-top: 5px;}*/
/*#seat-map > div.seatCharts-row >  div:first-child ~ div:hover{padding-top: 0;}*/
.seatCharts-row > div{transition: all .3s}
.btn{
    webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background-color: #ff8400;
    color: #fff;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding: 0 12px;
    transition: background-color .2s linear 0s;
    border: 0;
    cursor: pointer;
}